<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <link rel="stylesheet" href="./css/index.css">

    
   
    
<body>
    <div class="viewport">
        <!-- 信息 左边 -->
       <div class="column">
            <div class="panel overview">
                <div class="inner">
                    <ul>
                        <li>
                            <h3>2,290</h3>
                            <span>
                                <i class="icon-dot" ></i>&nbsp;设备总数
                            </span>
                        </li>
                        <li>
                            <h3>2,290</h3>
                            <span>
                                <i class="icon-dot" style="color: #6acca3;"></i>&nbsp;季度新增
                            </span>
                        </li>
                        <li>
                            <h3>2,290</h3>
                            <span>
                                <i class="icon-dot" style="color: #6acca3;"></i>&nbsp;运营设备
                            </span>
                        </li>
                        <li>
                            <h3>2,290</h3>
                            <span>
                                <i class="icon-dot" style="color: #ed3f35;" ></i>&nbsp;异常设备
                            </span>
                        </li>
                    </ul>
                    
                   
                </div>
            </div>
            <div class="panel monitor">
                <div class="inner">
                    <div class="tabls">
                        <a href="javascript:;" class="active">故障设备监控</a> 
                        <a href="javascript:;" >异常设备监控</a>
                    </div>
                    <div class="content">
                        <div class="head">
                            <span class="col">故障时间</span>
                            <span class="col">设备地址</span>
                            <span class="col">异常代码</span>
                        </div>
                        <div class="sjdzyc">
                            <div class="sjdzyc-view">
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区域西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区域西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区域西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区域西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区域西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区域西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区域西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区域西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区域西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区域西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区域西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区域西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区域西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区域西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区域西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区域西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区域西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区域西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区域西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平区域西路金燕龙写字楼</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel footer">
                <div class="inner">
                    <h1>点位分布统计</h1>
                    <div class="chart">
                        <div class="pie" ></div>
                        <div class="zs">
                                 <span>
                                       <h2>320,11</h2>
                                        <i class="icon-dot" style="color: red;"></i>
                                         点位总数
                                   </span>
                                 <span>
                                       <h2>418</h2>
                                       <i class="icon-dot" style="color: #eacf19;"></i>
                                       本月新增
                                   </span>
                        </div>
                    </div>
                </div>
            </div>
       </div>
       <!-- 订单 中间 -->
       <div class="column">
                <p>设备数据统计</p>
               <div class=" column-centerT">
                <div class="chinaview"></div>
               </div>
               <div class="panel column-centerB">
                <div class="inner">
                    <h1>全国用户总量统计</h1>
                    <div class="chart2">
                        <div class="box" ></div>
                        <div class="zs">
                                 <span>
                                       <h2>120,899</h2>
                                        <i class="icon-dot" style="color: red;"></i>
                                         用户总量
                                   </span>
                                 <span>
                                       <h2>418</h2>
                                       <i class="icon-dot" style="color: #eacf19;"></i>
                                       本月新增
                                   </span>
                        </div>
                    </div>
                </div>
               </div>
       </div>
       <!-- 订单 右边 -->
       <div class="column">
           <div class="panel overview-right">
               <!-- 头部时间 -->
               <div class="time">
                    <a href="javascript:;">365天</a> |
                    <a href="javascript:;">90天</a> |
                    <a href="javascript:;">30天</a> |
                    <a href="javascript:;">24天</a> 
               </div>
               <!-- 内容数据 -->
               <div class="time-data">
                   <span>
                       <h2>20,301,987</h2>
                       <i class="icon-dot" style="color: red;"></i>
                       订单量
                    </span>
                   <span>
                       <h2>99834</h2>
                       <i class="icon-dot" style="color: yellow;"></i>
                       销售额(万元)
                    </span>
               </div>
           </div>
           <div class="panel monitor-right"></div>
           <div class=" center-right">
               <div class="panel column-right-qd"></div>
               <div class="panel column-right-xx"></div>
           </div>
           <div class="panel footer-right"></div>
       </div>
       </div>
    </div>
    <script src="./js/flexible.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/city.js"></script>
    <script src="./js/china.js"></script>
    <script src="./js/china-dt.js"></script>
</body>
</html>
